<!doctype HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<title>ajax学习</title>
<style>
body {
color: #333;
font-family: sans-serif;
font-size: 12pt;
line-height: 170%;
padding: 0 30px 0 270px;
}

header .banner {
margin: 0 0 1em 0;
}

header .banner, nav .banner {
color: #777;
font-size: 10pt;
font-weight: bold;
}

header h1 {
background: #0c3;
border-radius: 4px;
color: #fff;
font-size: 24pt;
margin: 0;
padding: 1.2em 0;
text-align: center;
}

nav {
font-size: 10pt;
overflow-x: auto;
overflow-y: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 240px;
}

nav .menubar {
border-bottom: solid 1px #ccc;
display: none;
height: 48px;
line-height: 48px;
padding: 0 10px;
}

nav .button {
background: #777;
border: 1px solid #333;
color: #fff;
font-size: 10pt;
font-weight: bold;
padding: 8px;
border-radius: 4px;
}

nav ul {
padding: 0 0 0 10px;
}

nav ul a {
color: #333;
text-decoration: none;
}

nav ul a:hover {
text-decoration: underline;
}

nav li {
line-height: 180%;
list-style: none;
margin: 0;
padding: 0;
}

nav .level2 {
font-size: 11pt;
font-weight: bold;
}

nav .level3 {
padding-left: 1em;
}

nav .level3:before { 
content: "» ";
}

nav .level4 {
padding-left: 2em;
}

nav .level4:before {
content: "› ";
}

article h2 {
border-bottom: dotted 1px #777;
font-size: 20pt;
line-height: 100%;
margin: 2em 0 1em 0;
padding: 0 0 0.3em 0;
}

article h3 {
font-size: 12pt;
height:50px;
line-height: 50px;
margin: 2em 0 1em 0;
padding-left:20px;
background:#cccccc;
}

article h4 {
font-size: 12pt;
font-style:italic;
font-weight: normal;
line-height: 100%;
margin: 1.2em 0 1em 0;
padding: 0;
}

article p {
margin: 1em 0;
}

article p code {
background: #eee;
border: 1px solid #ccc;
}

article p strong {
color: #f00;
}

article pre {
background: #eee;
border-left: solid 2px #3c0;
font-size: 10pt;
margin: 1em 0;
padding: 0 0 0 1em;
overflow-x: auto;
overflow-y: padding;
line-height:16px;
padding-top:10px;
padding-bottom:10px;
}

article blockquote {
background: #fff;
border: dashed 1px #777;
border-left: solid 2px #777;
color: #000;
margin: 0;
padding: 0 0 0 1em;
}

article ul, article ol {
padding-left: 2em;
}

article img{height:300px;width:auto;}

footer {
border-top: 1px solid #ccc;
font-size: 10pt;
margin-top: 4em;
}

@media (max-width: 768px) {

body {
padding: 0 10px 0 230px;
}

nav {
width: 230px;
}

}

@media (max-width: 480px) {

body {
padding: 64px 10px 0 10px;
}

header .banner {
display: none;
}

nav {
position: absolute;
width: 100%;
}

nav .menubar {
display: block;
}

nav .banner {
float: right;
}

nav ul {
background: #fff;
display: none;
font-size: 14pt;
margin: 0;
padding: 0 0 0 8px;
}

nav .level2 {
font-size: 16pt;
font-weight: bold;
}

nav li {
line-height: 240%;
}

.index nav ul {
display: block;
}

.index article {
display: none;
}

}
</style>
<script>
  (function (tags) {
    var i = 0, len = tags.length;

    for (; i < len; ++i) {
        document.createElement(tags[i]);
    }
  }([ 'header', 'nav', 'article', 'footer' ]));
</script>
</head>
<body>
<header>
<h1 id="thinkphp-">ThinkPHP更改过的文件</h1>

</header>
<nav>
<div class="menubar">
<a class="button">&#9776;&nbsp;索引</a>
</div>
<ul>
<li class="level2"><a href="#1">ajax</a></li><li class="level3"><a href="#1.1">load()</a></li><li class="level4"><a href="#1.1.1">1. 载入HTML文档</a></li><li class="level4"><a href="#1.1.2">2. 筛选载入HTML文档</a></li><li class="level4"><a href="#1.1.3">3. 回调函数</a></li><li class="level4"><a href="#1.1.4">4. load php文件</a></li><li class="level4"><a href="#1.1.5">5. encodeURIComponent编码</a></li><li class="level3"><a href="#1.2">$.get和 $.post</a></li><li class="level4"><a href="#1.2.1">1. HTML片段</a></li><li class="level4"><a href="#1.2.2">2. XML片段</a></li><li class="level4"><a href="#1.2.3">3. JSON文件</a></li><li class="level3"><a href="#1.3">$.getScript</a></li><li class="level4"><a href="#1.3.1">1. 示例</a></li><li class="level4"><a href="#1.3.2">2. 回调函数</a></li><li class="level3"><a href="#1.4">$.getJSON()</a></li><li class="level4"><a href="#1.4.1">1. 加载本地文件</a></li><li class="level4"><a href="#1.4.2">2. 加载其他网站JSON</a></li><li class="level3"><a href="#1.5">ajax</a></li><li class="level4"><a href="#1.5.1">文章参考：</a></li><li class="level4"><a href="#1.5.2">1. 加载JS</a></li><li class="level4"><a href="#1.5.3">2. 加载JSON</a></li><li class="level4"><a href="#1.5.4">3. 加载远程</a></li><li class="level4"><a href="#1.5.5">4. ajaxStart和ajaxStop</a></li><li class="level3"><a href="#1.6">serialize()</a></li><li class="level4"><a href="#1.6.1">1. form表单</a></li><li class="level4"><a href="#1.6.2">2. checkbox,radio</a></li><li class="level4"><a href="#1.6.3">4. firebug输出</a></li><li class="level4"><a href="#1.6.4">5. serializeArray</a></li><li class="level4"><a href="#1.6.5">6. param</a></li></ul>

</nav>
<article>
<h2 id="1">ajax</h2>
<h3 id="1.1">load()</h3>
<p>结构： load(url[,data][,callback])  </p>
<p>ajax_test.html代码：  </p>
<pre><code>&lt;div class=&quot;comment&quot;&gt;
    &lt;h3&gt;张三&lt;/h3&gt;
    &lt;p class=&quot;para&quot;&gt;沙发1,&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;comment&quot;&gt;
    &lt;h3&gt;李四&lt;/h3&gt;
    &lt;p class=&quot;para&quot;&gt;沙发2,&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;comment&quot;&gt;
    &lt;h3&gt;王五&lt;/h3&gt;
    &lt;p class=&quot;para&quot;&gt;沙发3。&lt;/p&gt;
&lt;/div&gt;</code></pre>
<h4 id="1.1.1">1. 载入HTML文档</h4>
<p>test1.html 代码  </p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;ajax_load&lt;/title&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send&quot; value=&quot;load获取数据&quot; /&gt;&lt;/p&gt;
        &lt;div class=&quot;comment&quot;&gt;已有评论：&lt;/div&gt;
        &lt;div id=&quot;resText&quot;&gt;&lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function(){
                $(&quot;#send&quot;).click(function(){
                    $(&#39;#resText&#39;).load(&quot;ajax_test.html&quot;);
                });
            })
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4 id="1.1.2">2. 筛选载入HTML文档</h4>
<p>代码   </p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;ajax_load&lt;/title&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send&quot; value=&quot;load获取数据&quot; /&gt;&lt;/p&gt;
        &lt;div class=&quot;comment&quot;&gt;已有评论：&lt;/div&gt;
        &lt;div id=&quot;resText&quot;&gt;&lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function(){
                $(&quot;#send&quot;).click(function(){
                    $(&#39;#resText&#39;).load(&quot;ajax_test.html .para&quot;);
                });
            })
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4 id="1.1.3">3. 回调函数</h4>
<p>代码：  </p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;ajax_load&lt;/title&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send&quot; value=&quot;load获取数据&quot; /&gt;&lt;/p&gt;
        &lt;div class=&quot;comment&quot;&gt;已有评论：&lt;/div&gt;
        &lt;div id=&quot;resText&quot;&gt;&lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function(){
                $(&quot;#send&quot;).click(function(){
                    $(&#39;#resText&#39;).load(&quot;ajax_test.html .para&quot;,function (responseText, textStatus, XMLHttpRequest){
                         alert( $(this).html() );    //在这里this指向的是当前的DOM对象，即 $(&quot;#iptText&quot;)[0]
                         alert(responseText);       //请求返回的内容
                         alert(textStatus);            //请求状态：success，error
                         alert(XMLHttpRequest);     //XMLHttpRequest对象
                    });
                });
            })
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
<p><img src="images/ajax01.png" alt="">
<img src="images/ajax02.png" alt="">
<img src="images/ajax03.png" alt="">
<img src="images/ajax04.png" alt=""></p>
<h4 id="1.1.4">4. load php文件</h4>
<p>示例：</p>
<pre><code>`$(&quot;#resText&quot;).load(&quot;get1.php?username=&quot; + $(&#39;#username&#39;).val() + &quot;&amp;content=&quot; + $(&#39;#content&#39;).val());`</code></pre>
<p>源代码：</p>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                $(&quot;#send&quot;).click(function() {
                    $(&quot;#resText&quot;).load(&quot;get1.php?username=&quot; + $(&#39;#username&#39;).val() + &quot;&amp;content=&quot; + $(&#39;#content&#39;).val());
                    //如果是中文需要编码
                })
            })
        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;form id=&quot;form1&quot; action=&quot;#&quot;&gt;
            &lt;p&gt;评论:&lt;/p&gt;
            &lt;p&gt;姓名: &lt;input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot; /&gt;&lt;/p&gt;
            &lt;p&gt;内容: &lt;textarea name=&quot;content&quot; id=&quot;content&quot; rows=&quot;2&quot; cols=&quot;20&quot;&gt;&lt;/textarea&gt;&lt;/p&gt;
            &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send&quot; value=&quot;提交&quot; /&gt;&lt;/p&gt;
        &lt;/form&gt;

        &lt;div class=&#39;comment&#39;&gt;已有评论：&lt;/div&gt;
        &lt;div id=&quot;resText&quot;&gt;&lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;</code></pre>
<h4 id="1.1.5">5. encodeURIComponent编码</h4>
<p>示例：</p>
<pre><code>$.get(&quot;get1.php&quot;, &quot;username=&quot; + encodeURIComponent($(&#39;#username&#39;).val()) + &quot;&amp;content=&quot; + encodeURIComponent($(&#39;#content&#39;).val())</code></pre>
<p>源代码： </p>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                $(&quot;#send&quot;).click(function() {
                    $.get(&quot;get1.php&quot;, &quot;username=&quot; + encodeURIComponent($(&#39;#username&#39;).val()) + &quot;&amp;content=&quot; + encodeURIComponent($(&#39;#content&#39;).val()), function(data, textStatus) {
                        $(&quot;#resText&quot;).html(data); // 把返回的数据添加到页面上
                    });
                })
            })
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;form id=&quot;form1&quot; action=&quot;#&quot;&gt;
            &lt;p&gt;评论:&lt;/p&gt;
            &lt;p&gt;姓名: &lt;input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot; /&gt;&lt;/p&gt;
            &lt;p&gt;内容: &lt;textarea name=&quot;content&quot; id=&quot;content&quot; rows=&quot;2&quot; cols=&quot;20&quot;&gt;&lt;/textarea&gt;&lt;/p&gt;
            &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send&quot; value=&quot;提交&quot; /&gt;&lt;/p&gt;
        &lt;/form&gt;

        &lt;div class=&#39;comment&#39;&gt;已有评论：&lt;/div&gt;
        &lt;div id=&quot;resText&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h3 id="1.2">$.get和 $.post</h3>
<p>注意：以下把 $.get 换成 $.post 即可！  </p>
<h4 id="1.2.1">1. HTML片段</h4>
<p>test1.php<br>代码：</p>
<pre><code>&lt;?php 
    header(&quot;Content-Type:text/html; charset=utf-8&quot;);
    echo &quot;&lt;div class=&#39;comment&#39;&gt;&lt;h6&gt;{$_REQUEST[&#39;username&#39;]}:&lt;/h6&gt;&lt;p class=&#39;para&#39;&gt;{$_REQUEST[&#39;content&#39;]}&lt;/p&gt;&lt;/div&gt;&quot;;
?&gt;</code></pre>
<p>ajax_get.html  </p>
<p>注：这里的提交 type只能写成button，不能写成submit
代码：  </p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;ajax_get&lt;/title&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                $(function() {
                    $(&quot;#send&quot;).click(function() {
                        $.get(&quot;get1.php&quot;, {
                            username: $(&quot;#username&quot;).val(),
                            content: $(&quot;#content&quot;).val()
                        }, function(data, textStatus) {
                            $(&quot;#resText&quot;).html(data); // 把返回的数据添加到页面上
                        });
                    })
                })
            })
        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;form id=&quot;form1&quot; action=&quot;#&quot;&gt;
            &lt;p&gt;评论：&lt;/p&gt;
            &lt;p&gt;姓名：&lt;input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot; /&gt;&lt;/p&gt;
            &lt;p&gt;内容：&lt;textarea name=&quot;content&quot; id=&quot;content&quot; rows=&quot;2&quot; sols=&quot;20&quot;&gt;&lt;/textarea&gt;&lt;/p&gt;
            &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send&quot; value=&quot;提交&quot; /&gt;&lt;/p&gt;
        &lt;/form&gt;

        &lt;div class=&quot;comment&quot;&gt;已有评论&lt;/div&gt;
        &lt;div id=&quot;resText&quot;&gt;&lt;/div&gt;

    &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4 id="1.2.2">2. XML片段</h4>
<p>get2.php<br>代码：</p>
<pre><code>&lt;?php 
    header(&quot;Content-Type:text/xml; charset=utf-8&quot;);
    echo &quot;&lt;?xml version=&#39;1.0&#39; encoding=&#39;utf-8&#39;?&gt;&quot;.
         &quot;&lt;comments&gt;&quot;.
         &quot;&lt;comment username=&#39;{$_REQUEST[&#39;username&#39;] }&#39; &gt;&quot;.
         &quot;&lt;content&gt;{$_REQUEST[&#39;content&#39;]}&lt;/content&gt;&quot;.
         &quot;&lt;/comment&gt;&quot;.
         &quot;&lt;/comments&gt;&quot;;
?&gt;</code></pre>
<p>get2.html</p>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;

    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                $(&quot;#send&quot;).click(function() {
                    $.get(&quot;get2.php&quot;, {
                        username: $(&quot;#username&quot;).val(),
                        content: $(&quot;#content&quot;).val()
                    }, function(data, textStatus) {
                        var username = $(data).find(&quot;comment&quot;).attr(&quot;username&quot;);
                        var content = $(data).find(&quot;comment content&quot;).text();
                        var txtHtml = &quot;&lt;div class=&#39;comment&#39;&gt;&lt;h6&gt;&quot; + username + &quot;:&lt;/h6&gt;&lt;p class=&#39;para&#39;&gt;&quot; + content + &quot;&lt;/p&gt;&lt;/div&gt;&quot;;
                        $(&quot;#resText&quot;).html(txtHtml); // 把返回的数据添加到页面上
                    });
                })
            })
        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;form id=&quot;form1&quot; action=&quot;#&quot;&gt;
            &lt;p&gt;评论:&lt;/p&gt;
            &lt;p&gt;姓名: &lt;input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot; /&gt;&lt;/p&gt;
            &lt;p&gt;内容: &lt;textarea name=&quot;content&quot; id=&quot;content&quot; rows=&quot;2&quot; cols=&quot;20&quot;&gt;&lt;/textarea&gt;&lt;/p&gt;
            &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send&quot; value=&quot;提交&quot; /&gt;&lt;/p&gt;
        &lt;/form&gt;

        &lt;div class=&#39;comment&#39;&gt;已有评论：&lt;/div&gt;
        &lt;div id=&quot;resText&quot;&gt;
        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;</code></pre>
<h4 id="1.2.3">3. JSON文件</h4>
<p>get3.php  </p>
<pre><code>&lt;?php 
    header(&quot;Content-Type:text/html; charset=utf-8&quot;);
    echo &quot;{ \&quot;username\&quot; : \&quot;{$_REQUEST[&#39;username&#39;]}\&quot; , \&quot;content\&quot; : \&quot;{$_REQUEST[&#39;content&#39;]}\&quot;}&quot; 
?&gt;</code></pre>
<p>get3.html  </p>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;

    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                $(&quot;#send&quot;).click(function() {
                    $.get(&quot;get3.php&quot;, {
                        username: $(&quot;#username&quot;).val(),
                        content: $(&quot;#content&quot;).val()
                    }, function(data, textStatus) {
                        var username = data.username;
                        var content = data.content;
                        var txtHtml = &quot;&lt;div class=&#39;comment&#39;&gt;&lt;h6&gt;&quot; + username + &quot;:&lt;/h6&gt;&lt;p class=&#39;para&#39;&gt;&quot; + content + &quot;&lt;/p&gt;&lt;/div&gt;&quot;;
                        $(&quot;#resText&quot;).html(txtHtml); // 把返回的数据添加到页面上
                    }, &quot;json&quot;);
                })
            })
        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;form id=&quot;form1&quot; action=&quot;#&quot;&gt;
            &lt;p&gt;评论:&lt;/p&gt;
            &lt;p&gt;姓名: &lt;input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot; /&gt;&lt;/p&gt;
            &lt;p&gt;内容: &lt;textarea name=&quot;content&quot; id=&quot;content&quot; rows=&quot;2&quot; cols=&quot;20&quot;&gt;&lt;/textarea&gt;&lt;/p&gt;
            &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send&quot; value=&quot;提交&quot; /&gt;&lt;/p&gt;
        &lt;/form&gt;

        &lt;div class=&#39;comment&#39;&gt;已有评论：&lt;/div&gt;
        &lt;div id=&quot;resText&quot;&gt;&lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;</code></pre>
<h3 id="1.3">$.getScript</h3>
<h4 id="1.3.1">1. 示例</h4>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;

    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                $(&#39;#send&#39;).click(function() {
                    $.getScript(&#39;test.js&#39;);
                });
            })
        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send&quot; value=&quot;加载&quot; /&gt;&lt;/p&gt;
        &lt;div class=&quot;comment&quot;&gt;已有评论：&lt;/div&gt;
        &lt;div id=&quot;resText&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4 id="1.3.2">2. 回调函数</h4>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;

    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                $.getScript(&#39;jquery.color.js&#39;, function() {
                    $(&quot;#go&quot;).click(function() {
                        $(&quot;.block&quot;).animate({
                                backgroundColor: &#39;pink&#39;
                            }, 1000)
                            .animate({
                                backgroundColor: &#39;blue&#39;
                            }, 1000);
                    });
                });
            })
        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;button id=&quot;go&quot;&gt;运行&lt;/button&gt;
        &lt;div class=&quot;block&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h3 id="1.4">$.getJSON()</h3>
<h4 id="1.4.1">1. 加载本地文件</h4>
<p>test.json  </p>
<pre><code>[
  {
    &quot;username&quot;: &quot;张三&quot;,
    &quot;content&quot;: &quot;沙发.&quot;
  },
  {
    &quot;username&quot;: &quot;李四&quot;,
    &quot;content&quot;: &quot;板凳.&quot;
  },
  {
    &quot;username&quot;: &quot;王五&quot;,
    &quot;content&quot;: &quot;地板.&quot;
  }
]</code></pre>
<p>demo.html  </p>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                $(&#39;#send&#39;).click(function() {
                    $.getJSON(&#39;test.json&#39;, function(data) {
                        $(&#39;#resText&#39;).empty();
                        var html = &#39;&#39;;
                        $.each(data, function(commentIndex, comment) {
                            html += &#39;&lt;div class=&quot;comment&quot;&gt;&lt;h6&gt;&#39; + comment[&#39;username&#39;] + &#39;:&lt;/h6&gt;&lt;p class=&quot;para&quot;&gt;&#39; + comment[&#39;content&#39;] + &#39;&lt;/p&gt;&lt;/div&gt;&#39;;
                        })
                        $(&#39;#resText&#39;).html(html);
                    })
                })
            })
        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send&quot; value=&quot;加载&quot; /&gt;&lt;/p&gt;
        &lt;div class=&quot;comment&quot;&gt;已有评论：&lt;/div&gt;
        &lt;div id=&quot;resText&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4 id="1.4.2">2. 加载其他网站JSON</h4>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;

    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                $(&#39;#send&#39;).click(function() {
                    $.getJSON(&quot;http://api.flickr.com/services/feeds/photos_public.gne?tags=car&amp;tagmode=any&amp;format=json&amp;jsoncallback=?&quot;,
                        function(data) {
                            $.each(data.items, function(i, item) {
                                $(&quot;&lt;img class=&#39;para&#39;/&gt; &quot;).attr(&quot;src&quot;, item.media.m).appendTo(&quot;#resText&quot;);
                                if (i == 3) {
                                    return false;
                                }
                            });
                        }
                    );
                })
            })
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send&quot; value=&quot;加载&quot; /&gt;&lt;/p&gt;
        &lt;div id=&quot;resText&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h3 id="1.5">ajax</h3>
<h4 id="1.5.1">文章参考：</h4>
<p>《 $.ajax()方法详解 》 <a href="http://www.cnblogs.com/tylerdonet/p/3520862.html">http://www.cnblogs.com/tylerdonet/p/3520862.html</a><br>《JQuery.Ajax()的data参数类型 》<a href="http://www.cnblogs.com/haitao-fan/p/3908973.html">http://www.cnblogs.com/haitao-fan/p/3908973.html</a><br>《关于Jquery中ajax方法data参数用法的总结》 <a href="http://blog.csdn.net/smartsmile2012/article/details/17351567">http://blog.csdn.net/smartsmile2012/article/details/17351567</a></p>
<h4 id="1.5.2">1. 加载JS</h4>
<p>test.js</p>
<pre><code>var comments = [
  {
    &quot;username&quot;: &quot;张三&quot;,
    &quot;content&quot;: &quot;沙发.&quot;
  },
  {
    &quot;username&quot;: &quot;李四&quot;,
    &quot;content&quot;: &quot;板凳.&quot;
  },
  {
    &quot;username&quot;: &quot;王五&quot;,
    &quot;content&quot;: &quot;地板.&quot;
  }
];

var html = &#39;&#39;;
$.each( comments , function(commentIndex, comment) {
  html += &#39;&lt;div class=&quot;comment&quot;&gt;&lt;h6&gt;&#39; + comment[&#39;username&#39;] + &#39;:&lt;/h6&gt;&lt;p class=&quot;para&quot;&gt;&#39; + comment[&#39;content&#39;] + &#39;&lt;/p&gt;&lt;/div&gt;&#39;;
})

$(&#39;#resText&#39;).html(html);</code></pre>
<p>demo.html </p>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                $(&#39;#send&#39;).click(function() {
                    $.ajax({
                        type: &quot;GET&quot;,
                        url: &quot;test.js&quot;,
                        dataType: &quot;script&quot;
                    });
                });
            })
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send&quot; value=&quot;加载&quot; /&gt;&lt;/p&gt;
        &lt;div class=&quot;comment&quot;&gt;已有评论：&lt;/div&gt;
        &lt;div id=&quot;resText&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4 id="1.5.3">2. 加载JSON</h4>
<p>test.json</p>
<p>[
  {
    &quot;username&quot;: &quot;张三&quot;,
    &quot;content&quot;: &quot;沙发.&quot;
  },
  {
    &quot;username&quot;: &quot;李四&quot;,
    &quot;content&quot;: &quot;板凳.&quot;
  },
  {
    &quot;username&quot;: &quot;王五&quot;,
    &quot;content&quot;: &quot;地板.&quot;
  }
]</p>
<p>demo.html</p>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                $(&#39;#send&#39;).click(function() {
                    $.ajax({
                        type: &quot;GET&quot;,
                        url: &quot;test.json&quot;,
                        dataType: &quot;json&quot;,
                        success: function(data) {
                            $(&#39;#resText&#39;).empty();
                            var html = &#39;&#39;;
                            $.each(data, function(commentIndex, comment) {
                                html += &#39;&lt;div class=&quot;comment&quot;&gt;&lt;h6&gt;&#39; + comment[&#39;username&#39;] + &#39;:&lt;/h6&gt;&lt;p class=&quot;para&quot;&gt;&#39; + comment[&#39;content&#39;] + &#39;&lt;/p&gt;&lt;/div&gt;&#39;;
                            })
                            $(&#39;#resText&#39;).html(html);
                        }
                    });
                });
            })
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send&quot; value=&quot;加载&quot; /&gt;&lt;/p&gt;
        &lt;div class=&quot;comment&quot;&gt;已有评论：&lt;/div&gt;
        &lt;div id=&quot;resText&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4 id="1.5.4">3. 加载远程</h4>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;

    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                $(&#39;#send&#39;).click(function() {
                    $.ajax({
                        type: &quot;GET&quot;,
                        url: &quot;http://api.flickr.com/services/feeds/photos_public.gne?tags=car&amp;tagmode=any&amp;format=json&amp;jsoncallback=?&quot;,
                        dataType: &quot;jsonp&quot;,
                        success: function(data) {
                            $.each(data.items, function(i, item) {
                                $(&quot;&lt;img class=&#39;para&#39;/&gt; &quot;).attr(&quot;src&quot;, item.media.m).appendTo(&quot;#resText&quot;);
                                if (i == 3) {
                                    return false;
                                }
                            });
                        }
                    });
                });
            })
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send&quot; value=&quot;加载&quot; /&gt;&lt;/p&gt;
        &lt;div id=&quot;resText&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4 id="1.5.5">4. ajaxStart和ajaxStop</h4>
<p>核心代码：</p>
<pre><code>$(&quot;#loading&quot;).ajaxStart(function() {
    $(this).show();
});
$(&quot;#loading&quot;).ajaxStop(function() {
    $(this).hide();
});</code></pre>
<p>示例：</p>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;

    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            * {margin: 0;padding: 0;}
            body {font-size: 12px;}
            #loading {width: 80px;height: 20px;background: #bbb;color: #000;display: none;}
            img {border: 0;height: 100px;width: 100px;}
            .comment {margin-top: 10px;padding: 10px;border: 1px solid #ccc;background: #DDD;}
            .comment h6 {font-weight: 700;font-size: 14px;}
            .para {margin-top: 5px;text-indent: 2em;background: #DDD;}
        &lt;/style&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                //demo1:
                $(&#39;#send1&#39;).click(function() {
                    $.getJSON(&quot;http://api.flickr.com/services/feeds/photos_public.gne?tags=car&amp;tagmode=any&amp;format=json&amp;jsoncallback=?&quot;,
                        function(data) {
                            $(&quot;#resText1&quot;).empty();
                            $.each(data.items, function(i, item) {
                                $(&quot;&lt;img/&gt; &quot;).attr(&quot;src&quot;, item.media.m).appendTo(&quot;#resText1&quot;);
                                if (i == 3) {
                                    return false;
                                }
                            });
                        }
                    );
                });
                //demo2:
                $(&quot;#send2&quot;).click(function() {
                    $.get(&quot;get1.php&quot;, {
                        username: $(&quot;#username&quot;).val(),
                        content: $(&quot;#content&quot;).val()
                    }, function(data, textStatus) {
                        $(&quot;#resText2&quot;).html(data); // 把返回的数据添加到页面上
                    });
                })
                $.ajaxPrefilter(function(options) {
                    options.global = true;
                });
                //共用这2个全局的ajax事件
                $(&quot;#loading&quot;).ajaxStart(function() {
                    $(this).show();
                });
                $(&quot;#loading&quot;).ajaxStop(function() {
                    $(this).hide();
                });
            })
        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;br/&gt;
        &lt;div id=&quot;loading&quot;&gt;加载中...&lt;/div&gt;

        &lt;br/&gt; Demo1:
        &lt;br/&gt;
        &lt;input type=&quot;button&quot; id=&quot;send1&quot; value=&quot;加载&quot; /&gt;
        &lt;div id=&quot;resText1&quot;&gt;&lt;/div&gt;

        &lt;br/&gt; Demo2:
        &lt;br/&gt;
        &lt;form id=&quot;form1&quot; action=&quot;#&quot;&gt;
            &lt;p&gt;评论:&lt;/p&gt;
            &lt;p&gt;姓名: &lt;input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot; /&gt;&lt;/p&gt;
            &lt;p&gt;内容: &lt;textarea name=&quot;content&quot; id=&quot;content&quot; rows=&quot;2&quot; cols=&quot;20&quot;&gt;&lt;/textarea&gt;&lt;/p&gt;
            &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send2&quot; value=&quot;提交&quot; /&gt;&lt;/p&gt;
        &lt;/form&gt;
        &lt;div class=&#39;comment&#39;&gt;已有评论：&lt;/div&gt;
        &lt;div id=&quot;resText2&quot;&gt;
        &lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;</code></pre>
<h3 id="1.6">serialize()</h3>
<h4 id="1.6.1">1. form表单</h4>
<p>get1.php  </p>
<pre><code>&lt;?php 
    header(&quot;Content-Type:text/html; charset=utf-8&quot;);
    echo &quot;&lt;div class=&#39;comment&#39;&gt;&lt;h6&gt;{$_REQUEST[&#39;username&#39;]}:&lt;/h6&gt;&lt;p class=&#39;para&#39;&gt;{$_REQUEST[&#39;content&#39;]}&lt;/p&gt;&lt;/div&gt;&quot;;
?&gt;</code></pre>
<p>demo.html  </p>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;

    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                $(&quot;#send&quot;).click(function() {
                    $.get(&quot;get1.php&quot;, $(&quot;#form1&quot;).serialize(), function(data, textStatus) {
                        $(&quot;#resText&quot;).html(data); // 把返回的数据添加到页面上
                    });
                })
            })
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;form id=&quot;form1&quot; action=&quot;#&quot;&gt;
            &lt;p&gt;评论:&lt;/p&gt;
            &lt;p&gt;姓名: &lt;input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot; /&gt;&lt;/p&gt;
            &lt;p&gt;内容: &lt;textarea name=&quot;content&quot; id=&quot;content&quot; rows=&quot;2&quot; cols=&quot;20&quot;&gt;&lt;/textarea&gt;&lt;/p&gt;
            &lt;p&gt;&lt;input type=&quot;button&quot; id=&quot;send&quot; value=&quot;提交&quot; /&gt;&lt;/p&gt;
        &lt;/form&gt;

        &lt;div class=&#39;comment&#39;&gt;已有评论：&lt;/div&gt;
        &lt;div id=&quot;resText&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4 id="1.6.2">2. checkbox,radio</h4>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                $(&quot;#send&quot;).click(function() {
                    var $data = $(&quot;:checkbox,:radio&quot;).serialize();
                    alert($data);
                })
            })
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;check&quot; value=&quot;1&quot; checked=&quot;checked&quot; /&gt;篮球&lt;br/&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;check&quot; value=&quot;2&quot; /&gt;足球&lt;br/&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;check&quot; value=&quot;3&quot; /&gt;乒乓球&lt;br/&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;check&quot; value=&quot;4&quot; /&gt;羽毛球&lt;br/&gt;

        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; value=&quot;1&quot; checked=&quot;checked&quot; /&gt;篮球&lt;br/&gt;
        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; value=&quot;2&quot; /&gt;足球&lt;br/&gt;
        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; value=&quot;3&quot; /&gt;乒乓球&lt;br/&gt;
        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; value=&quot;4&quot; /&gt;羽毛球&lt;br/&gt;

        &lt;button id=&quot;send&quot;&gt;提交&lt;/button&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4 id="1.6.3">4. firebug输出</h4>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;

    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                var fields = $(&quot;:checkbox,:radio&quot;).serializeArray();
                console.log(fields); // Firebug输出
                $.each(fields, function(i, field) {
                    $(&quot;#results&quot;).append(field.value + &quot; , &quot;);
                });
            })
        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;p id=&quot;results&quot;&gt;&lt;b&gt;结果：&lt;/b&gt; &lt;/p&gt;

        &lt;input type=&quot;checkbox&quot; name=&quot;check&quot; value=&quot;1&quot; checked=&quot;checked&quot; /&gt;篮球&lt;br/&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;check&quot; value=&quot;2&quot; checked=&quot;checked&quot; /&gt;足球&lt;br/&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;check&quot; value=&quot;3&quot; checked=&quot;checked&quot; /&gt;乒乓球&lt;br/&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;check&quot; value=&quot;4&quot; /&gt;羽毛球&lt;br/&gt;

        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; value=&quot;1&quot; checked=&quot;checked&quot; /&gt;篮球&lt;br/&gt;
        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; value=&quot;2&quot; /&gt;足球&lt;br/&gt;
        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; value=&quot;3&quot; /&gt;乒乓球&lt;br/&gt;
        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; value=&quot;4&quot; /&gt;羽毛球&lt;br/&gt;

    &lt;/body&gt;

&lt;/html&gt;</code></pre>
<p><img src="images/ajax07.png" alt=""></p>
<h4 id="1.6.4">5. serializeArray</h4>
<p>注：带firebug输出</p>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;

    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                var fields = $(&quot;:checkbox,:radio&quot;).serializeArray();
                console.log(fields); // Firebug输出
                $.each(fields, function(i, field) {
                    $(&quot;#results&quot;).append(field.value + &quot; , &quot;);
                });
            })
        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;p id=&quot;results&quot;&gt;&lt;b&gt;结果：&lt;/b&gt; &lt;/p&gt;

        &lt;input type=&quot;checkbox&quot; name=&quot;check&quot; value=&quot;1&quot; checked=&quot;checked&quot; /&gt;篮球&lt;br/&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;check&quot; value=&quot;2&quot; checked=&quot;checked&quot; /&gt;足球&lt;br/&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;check&quot; value=&quot;3&quot; checked=&quot;checked&quot; /&gt;乒乓球&lt;br/&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;check&quot; value=&quot;4&quot; /&gt;羽毛球&lt;br/&gt;

        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; value=&quot;1&quot; checked=&quot;checked&quot; /&gt;篮球&lt;br/&gt;
        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; value=&quot;2&quot; /&gt;足球&lt;br/&gt;
        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; value=&quot;3&quot; /&gt;乒乓球&lt;br/&gt;
        &lt;input type=&quot;radio&quot; name=&quot;radio&quot; value=&quot;4&quot; /&gt;羽毛球&lt;br/&gt;

    &lt;/body&gt;

&lt;/html&gt;</code></pre>
<h4 id="1.6.5">6. param</h4>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;

    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function() {
                var obj = {a: 1,b: 2,c: 3};
                var k = $.param(obj);
                alert(k) // 输出  a=1&amp;b=2&amp;c=3
            })
        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
    &lt;/body&gt;

&lt;/html&gt;</code></pre>

</article>
<footer>
<p>© 2016 龙之翼网络科技</p>

</footer>
</body>
</html>
